import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card } from 'antd'
import BasicTable1 from './components/Table1'
import BasicTable2 from './components/Table2'
import BasicTable3 from './components/Table3'
import BasicTable4 from './components/Table4'
import BasicTable5 from './components/Table5'
import BasicTable6 from './components/Table6'
class BasicTableComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'BasicTableComponent',
    }
  }
  render() {
    return (
      <Fragment>
        <ContentWrap>
          <CardWrap>
            <Card title="基础表格使用知识点">
              <p>1.Table必须有两个属性columns和dataSource</p>
              <p>
                2.加边框,头部,尾巴 就是bordered title,footer
                (title,footer必须是函数)
              </p>
              <p>
                3.分页pagination 基本属性
                positoin位置,defaultPageSize每页多少条数据,total总数,onChange点击了以后回调函数,defaultCurrent.默认当前页1
              </p>
              <p>
                4.表格使用中文 基本属性 ConfigProvider 使用包裹层 ConfigProvider
                locale=zhCN
              </p>
              <p>5.表格使用checkbox必须要加rowSelection 这个属性</p>
              <p>6.操作按钮的时候需要在列上加入action一个列里面渲染数据</p>
            </Card>
          </CardWrap>
          {/* 第一个基础表格 */}
          <CardWrap>
            <Card title="基础表格使用知识点">
              <BasicTable1></BasicTable1>
            </Card>
          </CardWrap>
          {/* 第二个基础表格 */}
          <CardWrap>
            <Card title="基础表格使用知识点2带Checkbox">
              <BasicTable2></BasicTable2>
            </Card>
          </CardWrap>
          {/* 第三个基础表格 */}
          <CardWrap>
            <Card title="基础表格使用知识点2带radio">
              <BasicTable3></BasicTable3>
            </Card>
          </CardWrap>
          {/* 第四个基础表格 */}
          <CardWrap>
            <Card title="基础表格使用知识点排序">
              <BasicTable4></BasicTable4>
            </Card>
          </CardWrap>
          {/* 第五个基础表格设置中文变成中文*/}
          <CardWrap>
            <Card title="基础表格使用中文">
              <BasicTable5></BasicTable5>
            </Card>
          </CardWrap>
          {/* 第六个基础表格中文加操作按钮*/}
          <CardWrap>
            <Card title="基础表格使用中文,有操作按钮">
              <BasicTable6></BasicTable6>
            </Card>
          </CardWrap>
        </ContentWrap>
      </Fragment>
    )
  }
}

export default BasicTableComponent
